import React from "react";
// Import Swiper React components
import { EffectFade, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css/bundle";
import Recommend from "../components/Home";
import Concern from "../components/Home/Concern";
import Hot from "../components/Home/Hot";

function Home() {
  return (
    <>
      <Swiper
        className="mainSwiper"
        onSlideChange={() => console.log("slide change")}
        modules={[EffectFade, Pagination]}
        pagination={{
          clickable: true,
          renderBullet: (index, className) => {
            if (index === 0) {
              return "<span class=" + className + ">推荐</span>";
            } else if (index === 1) {
              return "<span class=" + className + ">关注</span>";
            } else {
              return "<span class=" + className + ">热门</span>";
            }
          },
        }}
        effect="fade"
      >
        
        {[1, 2, 3].map((i, el) => {
          return (
            <SwiperSlide key={el}>
              {el == 0 ? <Recommend /> : el == 1 ? <Concern /> : <Hot />}
            </SwiperSlide>
          );
        })}
      </Swiper>
    </>
  );
}

export default Home;
